<template>
	<view class="u-page">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar-placeholder"></view>

		<!-- Logo区域 -->
		<view class="login-logo">
			<up-image src="/static/logo.png" width="80px" height="80px" mode="aspectFit">
			</up-image>
			<up-text color="#fff" text="薪管家" size="24px" bold
				custom-style="margin-top: 15px; text-align: center; display: block; width: 100%;">
			</up-text>
		</view>

		<!-- 登录表单区域 -->
		<view class="login-form">
			<up-form class="edit-form" :model="loginForm" ref="form" :rules="rules">
				<!-- 手机号输入框 -->
				<up-form-item label="手机号" prop="userName" labelWidth="60">
					<up-input v-model="loginForm.userName" type="number" placeholder="请输入手机号" border="none" 
						placeholder-style="color: #888888"></up-input>
				</up-form-item>

				<!-- 验证码输入框 -->
				<up-form-item label="验证码" prop="code"  labelWidth="60" style="padding: 0px 10px;" >
					<up-input v-model="loginForm.code" type="number" border="none" placeholder="请填写验证码" placeholder-style="color: #888888">
						<template #suffix>
							<up-button @tap="getCode" :text="tips" type="primary" plain size="normal" style="flex: 0.7;" :disabled="disabled1"></up-button>
						</template>
					</up-input>
					
				</up-form-item>
			</up-form>

			<!-- 登录按钮 -->
			<view class="form-item" style="margin-top: 30px;">
				<up-button text="登录" type="primary" shape="round" size="large"
					custom-style="background: linear-gradient(180deg, #4A90E2 0%, #2C84E8 100%); border: none; height: 50px; color: #fff; font-weight: 500; border-radius: 8px;"
					@click="handleLogin" :loading="loading">
				</up-button>
			</view>

			<!-- 注册链接 -->
			<view class="form-item" style="text-align: center; margin-top: 20px;">
				<view style="white-space: nowrap;">
					<text style="color: #000000; font-size: 14px;">没有账号？</text>
					<text style="color: #1989fa; font-size: 14px; text-decoration: underline;"
						@click="goRegister">去注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { navigate as publicNavigate } from "@/utils/public.js";
import * as Auth from "@/api/auth.js";
// 表单引用
const form = ref(null);

// 响应式数据
const loading = ref(false);
const sendCodeLoading = ref(false);
const tips = ref('获取验证码');
const disabled1 = ref(false);
let timer = null;

// 表单数据
const loginForm = reactive({
	userName: '',
	code: ''
});

// 表单验证规则
const rules = {
	userName: [
		{
			required: true,
			message: '请输入手机号',
			trigger: ['blur', 'change'],
		},
	],
	code: [
		{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change'],
		},
	],
};

// 获取验证码
const getCode = () => {
	// 复用原有的验证逻辑
	if (!loginForm.userName.trim()) {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		});
		return;
	}

	if (!/^1[3-9]\d{9}$/.test(loginForm.userName)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		});
		return;
	}

	disabled1.value = true;
	let second = 60;
	tips.value = `${second}秒后重新获取`;
	Auth.getLoginCode(loginForm.userName).then(res => {
		if (res.code == 200) {
			uni.showToast({
				title: '验证码发送成功',
				icon: 'success'
			});
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	})

	// 倒计时
	timer = setInterval(() => {
		second--;
		tips.value = `${second}秒后重新获取`;
		if (second <= 0) {
			clearInterval(timer);
			tips.value = '获取验证码';
			disabled1.value = false;
		}
	}, 1000);
};

// 原始方法保留，防止其他地方调用
const getVerificationCode = () => {
	if (!loginForm.userName.trim()) {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		});
		return;
	}

	if (!/^1[3-9]\d{9}$/.test(loginForm.userName)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		});
		return;
	}

	sendCodeLoading.value = true;
	// 模拟发送验证码
	setTimeout(() => {
		sendCodeLoading.value = false;
		uni.showToast({
			title: '验证码发送成功',
			icon: 'success'
		});
	}, 1500);
};

// 登录函数
const handleLogin = () => {
	// 表单验证
	if (form.value) {
		form.value.validate().then(valid => {
			if (valid) {
				let loginParams = {
					userName: loginForm.userName,
					phone: loginForm.userName,
					code: loginForm.code
				};
				Auth.miniLogin(loginParams).then(res => {
					if (res.code == 200) {
						loading.value = false;
						Auth.getInfo().then(res => {
							if (res.code == 200) {
								console.log(res.data)
								uni.setStorageSync('userInfo', JSON.stringify(res.data));
								console.log("userInfo", uni.getStorageSync('userInfo'));
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});
								publicNavigate('/pages/index/index')
							}
						})
					} else if (res.code == 403) {
						loading.value = false;
						uni.showModal({
							title: '审核中',
							// content: '此账号企业正在审核，请耐心等待...',
							content: res.msg,
							showCancel: false,
							confirmText: '知道了',
							success: (res) => {
								if (res.confirm) {
									// 点击知道了后跳转到登录页

								}
							}
						});
					}
					else {
						loading.value = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					loading.value = false;
					uni.showToast({
						title: '登录失败',
						icon: 'none'
					});
				});

			} else {
				loading.value = false;
				uni.$u.toast('校验失败，请检查信息是否完整');
			}
		}).catch(() => {
			loading.value = false;
			// 处理验证错误
			uni.$u.toast('校验失败，请检查信息是否完整');
		}).finally(() => {


		});
	}
	loading.value = true;
};

// 忘记密码
const forgotPassword = () => {
	uni.showToast({
		title: '忘记密码功能待开发',
		icon: 'none'
	});
};

// 注册
const goRegister = () => {
	uni.navigateTo({
		url: '/pages/login/register'
	});
};
</script>

<style lang="scss">
	.status-bar-placeholder {
		height: 44px;
	}
.u-page {
	background: linear-gradient(180deg, #4A90E2 0%, #fff 100%);
	min-height: 100vh;
	position: relative;
}

.login-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 0 60px 0;
}

.login-form {
	padding: 0 40px;

	.form-item {
		margin-bottom: 15px;
	}
}

.edit-form {
	>view {
		margin-bottom: 15px;
		padding: 8px 10px;
		border-radius: 10px;
		background-color: #ffffff;
	}
}
</style>